class drawUtil {
  private draw: any;
  constructor(draw) {
    this.draw = draw;
  }

  //绘制矩形
  drawRect() {
    let rect1 = this.draw.rect(100, 100).attr({ fill: "#f06" }).move(250, 0);

    var rect3 = this.draw.rect(50, 50).radius(10, 20).move(180, 100);
    
  }

  // 线条
  addLine() {
    var line = this.draw
      .line(50, 50, 50, 100)
      .stroke({ width: 10, color: "#f06", linecap: "round" });

    console.log(line.array());
    console.log(line.plot());
    let num = 0;
    setInterval(() => {
      num++;
      if (num % 2) {
        line.plot("0,0 100,100");
      } else {
        line.plot("0,0 50,50");
      }
      // line.plot([
      //   [0, 0],
      //   [100, 150],
      // ]);
    }, 1000);
  }

  //绘制箭头
  drawArrow(color) {
    var arrow = this.draw.marker(12, 12, function (add) {
      add.path("M2,2 L2,11 L10,6 L2,2");
      add.fill(color);
    });

    //使用 Marke标记画箭头
    //画箭头
    var line = this.draw.line(0, 0, 20, 50).move(150, 20);
    line.stroke(color).attr({
      "stroke-width": 2,
    });
    line.marker("end", arrow);

    //画箭头2
    var line2 = this.draw
      .polyline([
        [0, 0],
        [0, 50],
        [50, 50],
      ])
      .move(100, 20);
    line2.fill("none").attr({
      stroke: "red",
      "stroke-width": 1,
    });
    line2.marker("end", arrow);
  }

  // 添加标记
  addMarker1() {
    var line = this.draw.line(0, 0, 50, 100).move(400, 20);
    line.stroke("blue");
    //创建marker,声明时指定宽度和高度，在标记处添加的形状超出部分会隐藏
    var marker1 = this.draw.marker(10, 10, function (add) {
      add.rect(20, 20);
    });
    //添加到直线
    line.marker("start", marker1);

    //获取引用
    var ref1 = line.reference("marker-start");
    console.info(ref1);
    //修改标记的大小，size()/width()/height()
    ref1.size(20, 20);
    //更改标记内容
    marker1.update(function (add) {
      add.circle(10).fill("#f09");
    });
  }

  // 添加标记
  addMarker2() {
    //SVG.Marker 标记可以被添加到一个线，折线的各点，多边形和路径。有三种类型的标记：开始，中间和结束。如果开始表示第一个点，则结束中间的最后一点和中间点。
    var path = this.draw.path("M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100");
    path.fill("none").move(450, 20).stroke({ width: 1, color: "#ccc" });
    path.marker("start", 10, 10, function (add) {
      add.circle(10).fill("#f06");
    });
    path.marker("mid", 10, 10, function (add) {
      add.rect(5, 10).cx(5).fill("#ccc");
    });
    path.marker("end", 20, 20, function (add) {
      add.circle(6).center(4, 5);
      add.circle(6).center(4, 15);
      add.circle(6).center(12, 10);
      this.fill("#0f9");
    });
  }

  // 链接
  addLink() {
    var link = this.draw.link("http://svgdotjs.github.io/");
    link.target("_blank");
    var textLink = link.text("百度").size(100, 20).fill("#0f0").move(200, 0);
    var rectLink = link.rect(100, 20).fill("#0f0").move(200, 20);
  }

  //分组
  addGroup() {
    let rect1 = this.draw.rect(50, 50).attr({ fill: "#f06" }).move(10, 100);
    let rect2 = this.draw.rect(50, 50).attr({ fill: "#f06" }).move(10, 160);
    let group = this.draw.group();
    group.path("M10,20L30,40");
    group.add(rect1);
    group.add(rect2, 0);
  }

  //引用
  addSymbol() {
    var symbol = this.draw.symbol();
    symbol.path("M10,20L30,40");
    let rect1 = this.draw.rect(50, 50).attr({ fill: "#f06" }).move(100, 100);
    let rect2 = this.draw.rect(50, 50).attr({ fill: "#f06" }).move(100, 160);
    symbol.add(rect1);
    symbol.add(rect2, 0);
    var use = this.draw.use(symbol);
    var defs1 = this.draw.defs();
  }

  // 添加文字
  addText() {
    var text = this.draw.text(function (add) {
      add.tspan("Lorem ipsum dolor sit amet ").newLine();
      add.tspan("consectetur").fill("#f06");
      add.tspan(".");
      add.tspan("Cras sodales imperdiet auctor.").newLine().dx(20);
      add.tspan("Nunc ultrices lectus at erat").newLine();
      add.tspan("dictum pharetra elementum ante").newLine();
    });

    var text1 = this.draw.text(
      "Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor."
    );

    var text2 = this.draw.text(function (add) {
      add.tspan("Lorem ipsum dolor sit amet ").newLine();
      add.tspan("consectetur").fill("#f06");
      add.tspan(".");
      add.tspan("Cras sodales imperdiet auctor.").newLine().dx(20);
      add.tspan("Nunc ultrices lectus at erat").newLine();
      add.tspan("dictum pharetra elementum ante").newLine();
    });
    var text3 = this.draw.plain(
      "Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor."
    );

    text.move(600, 0).font({ fill: "#f06", family: "Inconsolata" });
    text1.move(600, 100).font({ fill: "#f06", family: "Inconsolata" });
    text2.move(900, 0).font({ fill: "#f06", family: "Inconsolata" });
    text3.move(900, 100).font({ fill: "#f06", family: "Inconsolata" });
  }

  // 文字构建模式
  addTextBuild() {
    var text1 = this.draw
      .text("This is just the start, ")
      .move(600, 300)
      .font({ fill: "#f06", family: "Inconsolata" });
    text1.build(true); // enables build mode
    var tspan = text1.tspan("something pink in the middle ").fill("#00ff97");
    text1.plain("文字构建模式");
    text1.build(false); // disables build mode

    var text2 = this.draw
      .text("This is just the start, ")
      .move(600, 350)
      .font({ fill: "#f06", family: "Inconsolata" });
    var tspan = text2.tspan("something pink in the middle ").fill("#00ff97");
    text2.plain("文字 [非] 构建模式");

    const fontStyle = {
      family: "Helvetica",
      size: 24,
      anchor: "middle",
      leading: "1.5em",
    };
    text1.font(fontStyle);
    text2.font(fontStyle);
  }

  // 文字路径
  addTextPath() {
    var text = this.draw.text(function (add) {
      add.tspan("We go ");
      add.tspan("up").fill("#f09").dy(0);
      add.tspan(", then we go down, then up again").dy(40);
    });

    var path =
      "M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100";

    var textpath = text.path(path).font({ size: 22.5, family: "Verdana" });
    text.move(500, 100);
  }

  // 图片
  addImg() {
    var image = this.draw.image(
      "https://cdn.img42.com/4b6f5e63ac50c95fe147052d8a4db676.jpeg"
    );
    image.size(100, 100).move(20, 250);

    image.load("https://cdn.img42.com/4b6f5e63ac50c95fe147052d8a4db676.jpeg", () => {
      console.log("图片加载成功!");
    });
  }
}

export default drawUtil;
